(function($){
  'use strict'

  // 构造函数
  function Dropdown(el, options){
    // 带var声明的变量是局部的，只能在函数中使用
    this.$el = $(el),
    this.$layer = this.$el.find('dropdown-layer'),
    this.activeClass = this.$el.data('active') + '-active';
    // 都会在堆内存中开辟空间储存函数体
    // this.show = function(){}
    this._init()
  }

  Dropdown.prototype._init = function(){
    this.$layer.showHide(options)

    this.$layer.on('show shown hide hidden', function(e){
      console.log(e.type)
    })

    var self = this
    if(options.event === 'click'){
      this.$el.on('click', function(e){
        self.show()
        e.stopPropagation()
      })
      $(document).on('click', $.proxy(this.hide, this))
    } else {
      this.$el.hover($.proxy(this.show, this), $.proxy(this.hide, this))
    }
  }

  Dropdown.DEFAULTS = {
    css3: false,
    js: false,
    animation: 'fade'
  }

  Dropdown.prototype.show = function(){
    this.$el.addClass(activeClass)
    this.$layer.showHide('show')
  }
  Dropdown.prototype.hide = function(){
    this.$el.removeClass(activeClass)
    this.$layer.showHide('hide')
  }
  var dropdown = new Dropdown()
  dropdown.show()
  dropdown.hide()



  // function dropdown(el, options){
  //   var $el = $(el),
  //       $layer = $el.find('dropdown-layer'),
  //       activeClass = $el.data('active') + '-active';
    
  //   $layer.showHide(options)
  //   $el.hover(function(){
  //     $el.addClass(activeClass)
  //     $layer.showHide('show')
  //   }, function(){
  //     $el.removeClass(activeClass)
  //     $layer.showHide('hide')
  //   })
  // }

  // var defaults = {
  //   css3: false,
  //   js: false,
  //   animation: 'fade'
  // }

  $.fn.extend({
    dropdown: function(options){
      return this.each(function(){
        var options = $.extend({}, Dropdown.DEFAULTS, options)
        // dropdown(this, options)
        new Dropdown(this, options)
      })
    }
  })
})(jQuery);